<template>
  <div class="cesium-tips">
    <div class="cesium-tips-panel" v-if="tipsData">
      <header v-if="tipsData.name">
        {{tipsData.name}}
        <el-button type="text" icon="el-icon-close" @click="tipsClose"></el-button>
      </header>
      <center v-if="tipsData.datas">
        <div class="icon-block">
          <img v-for="(item,index) in tipsData.datas" :key="item.key" :src="item.icon" :alt="item.label" :title="item.label" @click="itemClick(item.key)"/>
        </div>
      </center>
    </div>
  </div>
</template>

<script>
  export default {
    name: "cesium-tips",
    props: {
      tipsData: {
        type: Object,
        default: () => {}
      }
    },
    methods: {
      tipsClose: function() {
        this.$emit("tipsClose")
      },
      itemClick:function(key){
        // console.log("点击",key)
        if(key==="scale"){
          this.$emit("handleScale")
        }
        if(key==="rotate"){
          this.$emit("handleRotate")
        }
        if(key==="translate"){
          this.$emit("handleTranslate")
        }
      }
    }
  }
</script>

<style lang="scss">
  .cesium-tips {
    pointer-events: auto;
    margin: auto;
    background: rgba(45, 92, 171, 0.6);
    border-radius: 1rem;
    border: 1px solid #4788FB;
    position: relative;

    &::after {
      content: "";
      display: block;
      border-width: calc(1rem - 1px);
      position: absolute;
      bottom: calc(-2rem + 2px);
      left: calc(50% - 1rem + 1px);
      border-style: solid dashed dashed;
      border-color: rgba($color: #4788FB, $alpha: 0.6) transparent transparent;
      font-size: 0;
      line-height: 0;
      z-index: 1;
    }

    &::before {
      content: "";
      display: block;
      border-width: 1rem;
      position: absolute;
      bottom: -2rem;
      left: calc(50% - 1rem);
      border-style: solid dashed dashed;
      border-color: #4788FB transparent transparent;
      font-size: 0;
      line-height: 0;
      z-index: 1;
    }

    .cesium-tips-panel {
      padding: 1rem;

      >header {
        color: rgba(255, 255, 255, 0.8);
        font-size: 1.2rem;
        position: relative;
        padding-right: 1rem;
        padding-bottom: 0.4rem;
        border-bottom: 1px dotted rgba(255, 255, 255, 0.8);

        >.el-button {
          position: absolute;
          right: -0.6rem;
          top: -1.6rem;
        }

        .el-button--text {
          color: #fff;
          font-size: 1rem;
        }
      }

      >center {
        .icon-block{
          padding-top: 0.4rem;
          display: flex;
          flex-direction: row;
          width: 8rem;
          justify-content: space-around;
          >img {
            width: 2rem;
            height: 2rem;
            // margin-right: 1rem;
            &:hover{
              cursor: pointer;
            }
          }
        }
        color: rgba(255, 255, 255, 0.8);
      }
    }
  }
</style>
